<template>
  <div class="body-box">
    <el-scrollbar height="580px">
      <div class="body-content">
        <el-row :gutter="18">
          <el-col :span="8" v-for="(item, index) in projectCardList" :key="index">
            <el-card shadow="hover">
              <div class="body-card" @mouseenter="changeCard(item)" v-if="item.cardFlag">
                <div class="body-top" v-if="item.flag">
                  <div class="top-icon">已置顶</div>
                </div>
                <div class="body-top-copy" v-else></div>
                <div class="body-title">
                  <div class="title-icon">
                    <img :src="getIcon(item.title)" />
                  </div>
                  <div class="title-word">
                    <div class="title">{{ item.title }}</div>
                    <div class="btn-card">
                      <div :class="getTagColor(item.title)">
                        <div class="title-pie" :style="getPieColor(item.title)"></div>
                        <div class="title-characters" :style="getWordColor(item.title)">{{ item.tag }}</div>
                      </div>
                      <div class="btn-warn" v-if="item.warnFlag">
                        <div class="warn-card">
                          <div class="warn-pie"></div>
                          <div class="warn-characters">已超期{{ 100 }}天</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <el-popover placement="bottom" width="10px" trigger="hover">
                    <template #reference>
                      <div class="more-icon">
                        <div class="more">
                          <div class="more-pie"></div>
                          <div class="more-pie"></div>
                          <div class="more-pie"></div>
                        </div>
                      </div>
                    </template>
                    <div>
                      <div class="popover-div" @click="onTop(item)">{{ item.flag ? '取消置顶' : '置顶' }}</div>
                      <div @click="onUpLoad(item)" class="popover-div">离线导入</div>
                      <div class="popover-div">离线导出</div>
                    </div>
                  </el-popover>
                </div>
                <div>
                  <div class="body-subtitle">{{ item.subtitle }}</div>
                  <div class="body-progress">
                    <el-progress
                      :color="getColor(item.title)"
                      :text-inside="true"
                      :stroke-width="18"
                      :percentage="item.progress"
                    />
                  </div>
                  <div class="card-bottom">
                    <div class="bottom-compony">
                      <div class="compony-icon">
                        <img src="@/assets/images/project-view/building.png" />
                      </div>
                      <div class="compony-word">被审计单位：{{ item.compony }}</div>
                    </div>
                    <div class="bottom-time">
                      <div class="time-icon">
                        <img src="@/assets/images/project-view/calendar.png" />
                      </div>
                      <div class="time-word">实施周期：{{ item.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="card-hover" @mouseleave="onMouseOut(item)">
                <div class="hover-content">
                  <div class="hover-son son-color" @mouseleave="enterLeave(item)" @mouseenter="enterCard(item)">
                    <div class="son-body">
                      <div class="son-enter">
                        <img src="@/assets/images/project-view/configuration.png" v-if="item.enterFlag" />
                        <img src="@/assets/images/project-view/enter.png" v-else />
                      </div>
                      <div class="enter-word">进入流程</div>
                    </div>
                  </div>
                  <div
                    class="hover-son son-color"
                    @mouseleave="configurationLeave(item)"
                    @mouseenter="configurationCard(item)"
                  >
                    <div class="son-body">
                      <div class="son-enter">
                        <img src="@/assets/images/project-view/configuration.png" v-if="item.configurationFlag" />
                        <img src="@/assets/images/project-view/enter.png" v-else />
                      </div>
                      <div class="enter-word">配置流程</div>
                    </div>
                  </div>
                  <div class="hover-son son-color" @mouseleave="personnelLeave(item)" @mouseenter="personnelCard(item)">
                    <div class="son-body">
                      <div class="son-enter">
                        <img src="@/assets/images/project-view/personnel.png" v-if="item.personnelFlag" />
                        <img src="@/assets/images/project-view/enter.png" v-else />
                      </div>
                      <div class="enter-word">配置人员</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="btn-more">
          <el-button type="primary" plain
            >加载更多 <el-icon><ArrowDown /></el-icon
          ></el-button>
        </div>
      </div>
    </el-scrollbar>
    <projectUpLoad ref="upload"></projectUpLoad>
  </div>
</template>

<script setup>
import timepiece from '@/assets/images/workbench-homepage/timepiece.png';
import bulletin from '@/assets/images/workbench-homepage/bulletin.png';
import download from '@/assets/images/workbench-homepage/download.png';
import projectUpLoad from './project-upload.vue';
import work from '@/assets/images/workbench-homepage/work.png';
import wrench from '@/assets/images/workbench-homepage/wrench.png';
import { defineProps, ref } from 'vue';

const props = defineProps({
  projectCardList: Array,
});
const { projectCardList } = toRefs(props);

const enterLeave = (item) => {
  item.enterFlag = true;
};
const enterCard = (item) => {
  item.enterFlag = false;
};
const configurationLeave = (item) => {
  item.configurationFlag = true;
};
const configurationCard = (item) => {
  item.configurationFlag = false;
};
const personnelLeave = (item) => {
  item.personnelFlag = true;
};
const personnelCard = (item) => {
  item.personnelFlag = false;
};
const changeCard = (item) => {
  item.cardFlag = false;
};

const onMouseOut = (item) => {
  item.cardFlag = true;
};

const onTop = (item) => {
  item.flag = !item.flag;
};
const upload = ref(null);
const onUpLoad = () => {
  upload.value.init();
};
const getIcon = (item) => {
  // console.log(item);
  if (item === '审前准备') {
    return timepiece;
  }
  if (item === '现场实施') {
    return wrench;
  }
  if (item === '项目结项') {
    return bulletin;
  }
  if (item === '审计报告') {
    return work;
  }
  return download;
};
const getColor = (item) => {
  // console.log(item);
  if (item === '审前准备') {
    return '#24AC76';
  }
  if (item === '现场实施') {
    return '#2E72EF';
  }
  if (item === '项目结项') {
    return '#6F17BE';
  }
  if (item === '审计报告') {
    return '#D44040';
  }
  return '#5873AA';
};
const getTagColor = (item) => {
  // console.log(item);
  if (item === '审前准备') {
    return 'title-bot timepiece';
  }
  if (item === '现场实施') {
    return 'title-bot wrench';
  }
  if (item === '项目结项') {
    return 'title-bot bulletin';
  }
  if (item === '审计报告') {
    return 'title-bot work';
  }
  return 'title-bot download';
};
const getWordColor = (item) => {
  if (item === '审前准备') {
    return 'color:#24ac76';
  }
  if (item === '现场实施') {
    return 'color:#2e72ef';
  }
  if (item === '项目结项') {
    return 'color:#6f17be';
  }
  if (item === '审计报告') {
    return 'color:#e98d38;width:110px';
  }
  return 'color:#5873aa';
};
const getPieColor = (item) => {
  if (item === '审前准备') {
    return 'background:#24ac76';
  }
  if (item === '现场实施') {
    return 'background:#2e72ef';
  }
  if (item === '项目结项') {
    return 'background:#6f17be';
  }
  if (item === '审计报告') {
    return 'background:#e98d38';
  }
  return 'background:#5873aa';
};
</script>

<style lang="scss" scoped>
.body-box {
  width: 100%;
  height: 100%;
  .body-card {
    height: 215px;
    background: #f9fafb;
    border-radius: 4px;
    width: 529px;
    box-sizing: border-box;
    .body-top {
      width: 100%;
      height: 17px;
      display: flex;
      justify-content: end;
      .top-icon {
        width: 54px;
        height: 17px;
        background-image: url('@/assets/images/workbench-homepage/rectangle.png');
        font-size: 12px;
        color: #fff;
        padding-left: 15px;
        box-sizing: border-box;
      }
    }
    .body-top-copy {
      width: 100%;
      height: 17px;
    }
    .body-title {
      width: 100%;
      height: 40px;
      display: flex;
      .title-icon {
        width: 40px;
        height: 40px;
        margin: 0 18px 0 16px;
      }
      .title-word {
        height: 40px;
        width: 300px;
        .title {
          font-size: 14px;
          color: #25292c;
          line-height: 20px;
          font-weight: 500;
        }
        .btn-card {
          width: 100%;
          display: flex;
          .title-bot {
            width: 103px;
            height: 18px;
            border-radius: 10px;
            box-sizing: border-box;
            display: flex;
            .title-pie {
              width: 6px;
              height: 6px;
              background: #24ac76;
              border-radius: 50%;
              margin: 6px;
            }
            .title-characters {
              font-weight: 400;
              width: 77px;
              font-size: 12px;
              height: 17px;
            }
          }
          .btn-warn {
            margin-left: 10px;
            width: 103px;
            height: 18px;
            background: rgba(212, 64, 64, 0.2);
            border-radius: 10px;
            .warn-card {
              display: flex;
              .warn-pie {
                width: 6px;
                height: 6px;
                background: #d44040;
                border-radius: 50%;
                margin: 6px;
              }
              .warn-characters {
                font-weight: 400;
                color: #d44040;
                width: 77px;
                font-size: 12px;
                height: 17px;
              }
            }
          }
        }
      }
      .more-icon {
        cursor: pointer;
        height: 40px;
        width: 40px;
        margin-left: auto;
        .more {
          margin: 12px 0 0 18px;
          width: 2px;
          height: 16px;
          .more-pie {
            width: 2px;
            height: 2px;
            background: #a3aab0;
            border-radius: 50%;
            margin-bottom: 5px;
          }
        }
      }
    }
    .body-subtitle {
      width: 425px;
      height: 24px;
      font-size: 16px;
      font-family: SourceHanSansSCVF-Medium, SourceHanSansSCVF;
      font-weight: 500;
      color: #25292c;
      line-height: 24px;
      letter-spacing: 1px;
      margin: 16px 0 17px 74px;
    }
    .body-progress {
      width: 431px;
      height: 18px;
      margin: 0 24px 17px 74px;
    }
    .card-bottom {
      width: 425px;
      height: 42px;
      margin-left: 74px;
      .bottom-compony {
        display: flex;
        .compony-icon {
          width: 14px;
          height: 14px;
          margin: 0 4px 8px 0;
        }
        .compony-word {
          font-size: 14px;
          font-weight: 400;
          color: #50565d;
          line-height: 20px;
        }
      }
      .bottom-time {
        display: flex;
        .time-icon {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
        .time-word {
          font-size: 14px;
          font-weight: 400;
          color: #50565d;
          line-height: 20px;
        }
      }
    }
  }
  .btn-more {
    width: 100%;
    text-align: center;
  }
}

.timepiece {
  background: rgba(36, 172, 118, 0.2);
}
.bulletin {
  background: rgba(111, 23, 190, 0.2);
}
.download {
  background: rgba(88, 115, 170, 0.2);
}
.work {
  background: rgba(233, 141, 56, 0.2);
  width: 150px !important;
}
.wrench {
  background: rgba(46, 114, 239, 0.2);
}
.popover-div {
  text-align: center;
  cursor: pointer;
}
// ::v-deep .el-popper {
//   min-width: 100px !important;
// }
.card-hover {
  height: 215px;
  display: flex;
  justify-content: center;
  .hover-content {
    width: 100%;
    height: 215px;
    display: flex;
    justify-content: space-between;
    .hover-son {
      width: 176px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      .son-body {
        width: 56px;
        height: 90px;
        cursor: pointer;
        .son-enter {
          width: 54px;
          height: 54px;
          margin-left: 1px;
        }
        .enter-word {
          color: #2e72ef;
          font-size: 14px;
          margin-top: 8px;
        }
      }
    }
    .son-color:hover {
      background: #2e72ef;
    }
    .son-color:hover > .son-body > .enter-word {
      color: #fff !important;
    }
  }
}
</style>
